<template>
    <el-container>
<!--        头部-->
        <el-header height="70px">
            <div>
                <img src="img/login_logo.svg" alt="">
                <span>租房管理系统</span>
            </div>
        </el-header>
<!--        主体-->
        <el-main :style="bcImg">
<!--            登录模块-->
            <el-card class="box-card">
                <h2>欢迎登录</h2>
<!--                密码登录-->
                <el-form :model="loginForm" v-if="isPwd">
                    <el-form-item>
                        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                        <span class="iconfont icon-yonghu-fuben"></span>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.pwd" placeholder="请输入密码"> </el-input>
                        <span class="iconfont icon-suo"></span>
                    </el-form-item>

                    <div class="caozao_div">
                        <el-checkbox v-model="loginForm.isChecked" @change="rememberMe">记住密码</el-checkbox>
                        <el-link class="forgetPwd">忘记密码</el-link>
                    </div>
                    <el-button type="button" @click="bt_login">登录</el-button>
                </el-form>
<!--                验证码登录-->
                <el-form :model="loginForm" v-if="!isPwd">
                    <el-form-item>
                        <el-input v-model="loginForm.tel" placeholder="请输入手机号"></el-input>
                        <span class="iconfont icon-shouji"></span>
                    </el-form-item>
                    <div class="set_verify">
                        <el-form-item>
                            <el-input v-model="loginForm.verify" placeholder="请输入验证码"></el-input>
                            <span class="iconfont icon-yanzhengma"></span>
                        </el-form-item>
                        <el-button type="button" @click="set_verify">发送验证码</el-button>
                    </div>
                    <el-button type="button" @click="bt_login">登录</el-button>
                </el-form>
                <div class="Verification">
                    <el-link @click="isPwd=false" v-if="isPwd">验证码登录</el-link>
                    <el-link @click="isPwd=true" v-if="!isPwd">密码登录</el-link>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import allRouter from '../../router/allRouter';
import dongRouter from "../../router/dongRouter";
export default {
  name: "login",
  data(){
      return {
          loginForm:{
              username:'',
              pwd:'',
              isChecked:'',
              tel:'',
              verify:''
          },
          isPwd:true,   //是否密码登录，默认true
          randomVerify:'',   //验证码
          isSuccess:false,      //该手机号是否存在
          bcImg:{
              backgroundImage: "url(" + require("../../assets/bg_login.jpg") + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "100% 100%"
          }
      }
  },
  methods:{
      bt_login(){
          //密码登录
          if(this.isPwd){
              if(this.loginForm.username == '' || this.loginForm.pwd == ''){
                  this.$message({
                      message: '用户名和密码不能为空',
                      type: 'warning'
                  });
              }else {
                  this.$axios.post('/api'+allRouter.login.login,{
                      userName:this.loginForm.username,
                      userPwd:this.loginForm.pwd
                  }).then(res=>{
                      console.log(res);
                      if(res.data.code == 200){
                          if(this.loginForm.isChecked){ //记住密码
                              localStorage.setItem('loginInfo',JSON.stringify({userName:this.loginForm.username,userPwd:this.loginForm.pwd}))
                          }
                          //存储token及用户信息到vuex中
                          this.$store.dispatch('loginSuccess',res.data.data);
                          //获取侧边栏
                          this.getAside();
                          this.$router.push('/index').catch(err=>{
                              console.log(err)
                          });
                      }else{
                          this.$message.error(res.data.msg);
                      }
                  }).catch(err=>{
                      this.$message.error(err);
                  })
              }
          }else {    //验证码登录
             if(this.isSuccess){
                 if(this.loginForm.verify == this.randomVerify){
                     //获取侧边栏
                     this.getAside();
                     this.$router.push('/index').catch(err=>{
                         console.log(err)
                     });;
                 }else {
                     this.$message.error('验证码输入错误');
                 }
             }
          }
      },
      //发送验证码
      set_verify(){
          var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
          if((reg.test(this.loginForm.tel))){
              this.randomVerify = '';
              for(var i=0;i<4;i++){         //产生4位随机数
                  this.randomVerify+=parseInt(Math.random()*10)
              }
              console.log(this.randomVerify);
              this.$axios.post('/api'+allRouter.login.verify,{
                  phone:this.loginForm.tel,
                  code:this.randomVerify
              }).then(res=>{
                  if(res.data.code == 200){
                      this.isSuccess = true;
                      this.$message({
                          message: '验证码发送成功，请注意查收',
                          type: 'success'
                      });
                      this.$store.dispatch('loginSuccess',res.data.data);
                  }else {
                      this.isSuccess = false;
                      this.$message.error('该手机号未注册');
                  }
              }).catch(err=>{
                  console.log(err)
              })
          }else {
              this.$message({
                  message: '手机号格式不正确',
                  type: 'warning'
              });
          }

      },
      // 获取侧边栏
      getAside(){
          var identity = JSON.parse(sessionStorage.getItem('userInfo')).identity;
          this.$axios.post('/api'+allRouter.login.getAside,{
              identity: identity
          }).then(res=>{
              this.$store.dispatch('getAside',res.data.data);
              // 动态添加路由
              dongRouter.DynamicAddRouter()
          }).catch(err=>{
              console.log(err)
          });
      },
      //记住密码
      rememberMe(){
          if(!this.loginForm.isChecked){       //不记住密码
              if(localStorage.getItem('loginInfo')){
                  localStorage.removeItem('loginInfo')
              }
          }
      }
  },
  mounted() {
      if(localStorage.getItem('loginInfo')){
          this.loginForm.isChecked = true;
          this.loginForm.username = JSON.parse(localStorage.getItem('loginInfo')).userName;
          this.loginForm.pwd = JSON.parse(localStorage.getItem('loginInfo')).userPwd;
      }
  }
}
</script>

<style scoped>
/*    顶部*/
  /deep/ header.el-header{
      height: 70px;
      line-height: 70px;
      font-size: 28px;
      color: #0B324C;
      padding-left: 40px;
  }
  header img{
      vertical-align: middle;
      width: 36px;
      height: 36px;
  }
/*    主体*/
  section.el-container{
      height: 100%;
      font-family: 微软雅黑;
  }
    /deep/ main.el-main{
        height: calc(100% - 70px);
        position: relative;
        padding: 0;
    }
    /deep/ .el-card__body{
        width: 380px;
        height: 370px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        padding: 40px;
        background-color: white;
    }
    .el-card__body h2{
        color: #3080FE;
        font-weight: 400;
        width: 100%;
        text-align: center;
        height: 60px;
        font-size: 26px;
        line-height: 60px;
        margin-bottom: 30px;
    }
    /*图标*/
    /deep/ div.el-form-item__content{
        position: relative;
        height: 50px;
    }
    /deep/ div.el-form-item__content span{
        position: absolute;
        left: 10px;
        top: 5px;
        color: #cccccc;
        font-size: 24px;
    }
    /deep/ input.el-input__inner{
        color: rgb(204, 204, 204);
        height: 50px;
        margin-bottom: 35px;
        padding-left: 45px;
    }
    /deep/ input.el-input__inner:last-child{
        margin-bottom: 20px;
    }
    /*忘记密码*/
    .caozao_div{
        overflow: hidden;
        margin-bottom: 20px;
    }
    .forgetPwd{
        float: right;
        color: #3080FE;
    }
    /*登录按钮*/
    /deep/ button.el-button{
        background-color: #3080FE;
        color: white;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        padding: 0;
    }
/*    验证码登录*/
    .Verification{
        width: 100%;
        text-align: right;
        margin-top: 15px;
    }

    /deep/.set_verify .el-form-item{
        width: 78%;
        float: left;
    }
    /deep/.set_verify .el-button{
        width: 20%;
        float: right;
        border: none;
        font-size: 16px;
        background-color: transparent;
        color: #606266;
    }
</style>
